<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}" type="text/css">
    <link rel="stylesheet" th:href="@{css/bootstrap-theme.css}" type="text/css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2098488_hqzg0si39mm.css" type="text/css">
    <script type="application/javascript" th:src="@{/js/bootstrap.js}"></script>
    <script type="application/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
    <script>
        $(document).ready(function () {
            $("#login").click(function () {
                window.location.href="/user/toLogin"
            })


                $("#username").blur(function () {
                    var name = $("#username").val()
                    $.get('/user/exist',{'username':name},function (data) {
                        if (data==true){
                            $("#ErrorName").html("用户名已存在")
                        }else {
                            $("#ErrorName").html("")
                        }
                    })
                })

        })
    </script>
    <style>
        body{
            background-image: url("https://self.cdu.edu.cn/public/deploy/images/bg/not_logged_in_bg.jpg");
        }
    </style>
</head>
<body>
<div style="margin-top: 400px">
    <form class="form-horizontal" action="/user/register" method="post">
        <div class="form-group">
            <label style="color: white;font-size: 15px" for="username" class="col-sm-9 control-label">
                <span class="iconfont icon-xingmingyonghumingnicheng"></span>
                用户名</label>
            <div class="col-sm-2">
                <input required type="text" class="form-control" name="username" id="username" placeholder="用户名">
            </div>
            <div id="ErrorName" style="color: red"></div>
        </div>
        <div class="form-group">
            <label style="color: white;font-size: 15px" for="password" class="col-sm-9 control-label">
                <span class="iconfont icon-mima"></span>
                密码</label>
            <div class="col-sm-2">
                <input required type="password" class="form-control" name="password" id="password" placeholder="密码">
            </div>
        </div>
        <div class="form-group">
            <label style="color: white;font-size: 15px" for="password" class="col-sm-9 control-label">
                <span class="iconfont icon-mima"></span>
                确认密码</label>
            <div class="col-sm-2">
                <input required type="password" class="form-control" name="password2" id="password2" placeholder="密码">
            </div>
        </div>
        <div class="form-group">
            <label style="color: white;font-size: 15px" for="email" class="col-sm-9 control-label">
                <span class="iconfont  icon-youxiang"></span>
                邮箱</label>
            <div class="col-sm-2">
                <input required type="email" class="form-control" name="email" id="email" placeholder="email">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-9 col-sm-2" >
                <button style="text-align: center" type="button" id="login" class="btn btn-success"> <span class="iconfont  icon-xiaoren"></span>登录</button>
                <button type="submit"  class="btn btn-info"> <span class="iconfont  icon-zhuce"></span>注册</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>